<script lang="ts" setup>
import {
  Project,
  ProjectRecord,
  getAllProjects,
  getProcessInfoByPjtNoAndPcsNo,
  getProjectInfoByPjtNo,
  createProjectByInfo,
  editFileStatus,
  refuseCheckClient,
  acceptCheckClient
} from "@/api/projects";
import { useUserStore } from "@/store";
import instance from "@/utils/request";
import { Message } from "@arco-design/web-vue";
import {
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElDialog,
  ElUpload,
} from "element-plus";

const workingItems = ref<Project[]>([]);
const finishedItems = ref<Project[]>([]);
const userStore = useUserStore();
onMounted(async () => {
  try {
    // 获取所有项目
    const res = await getAllProjects(userStore.userId);
    if (res.data.code === 200) {
      // 根据完成状态分别赋予列表
      workingItems.value = res.data.data.filter(
        (item) => item.pjtStatus === "0"
      );
      finishedItems.value = res.data.data.filter(
        (item) => item.pjtStatus === "1"
      );
      Message.success("获取数据成功");
    } else {
      Message.error("获取数据失败");
    }
  } catch (err) {
    Message.error("获取数据失败");
  }
});

const tableData = ref([]);
const selectData = ref([]);
const projectFilePath = ref();
const breadcrumbs = ref([
  {
    list: "",
    index: "",
  },
]);

const extraFormData = ref({
  parentPath: "",
  parentID: "",
});

const uploadVisiable = ref(false);
const uploadFile = ref(null);

const getData = async () => {
  extraFormData.value.parentPath = breadcrumbs.value
    .map((b) => b.list)
    .join("\\");
  extraFormData.value.parentID =
    breadcrumbs.value[breadcrumbs.value.length - 1].index;
  try {
    console.log(extraFormData.value.parentPath)
    const resp = await instance.get("http://localhost:3000/api/pan/getData", {
      params: {
        parentPath: extraFormData.value.parentPath,
      },
    });
    tableData.value = resp.data.map((item) => ({ ...item, showOp: false }));
  } catch {
    Message.error("获取数据失败");
  }
};

const showOp = (row) => {
  tableData.value.forEach((item) => {
    item.showOp = false;
  });
  row.showOp = true;
};

const hideOp = (row) => {
  row.showOp = false;
};

const freshData = (row) => {
  if (row.type === 0) {
    breadcrumbs.value.push({
      list: row.fileName,
      index: row.fileID,
    });
    getData();
  }
};

const toFile = (item) => {
  const indexOfElement = breadcrumbs.value.indexOf(item);
  if (indexOfElement !== -1) {
    breadcrumbs.value.splice(indexOfElement + 1);
  }
  getData();
};

const couldUpload = async () => {
  try {
   
    const resp = await instance.get(
      "http://localhost:3000/api/pan/determineUpload",
      {
        params: {
          parentPath: extraFormData.value.parentPath,
        },
      }
    );
    if (resp.data.code === 403) {
      Message.error("不能在此上传文件");
      return;
    } else {
      uploadVisiable.value = true;
    }
  } catch {
    Message.error("不能在此上传文件");
  }
};

const handleSuccess = async() => {
  getData();
  Message.success("文件上传成功");
  //将上传状态改为1
  await editFileStatus(projectInfo.value?.pjtNo,currentStep.value)
  //重新加载流程
  const res = await getProcessInfoByPjtNoAndPcsNo(projectInfo.value?.pjtNo, currentStep.value);
  if (res.data.code === 200) {
    processInfo.value = res.data.data;
  }
};

const handleError = () => {
  Message.error("文件上传失败");
};

const handleClose = () => {
  uploadFile.value.clearFiles();
};

const downloadFile = async (row) => {
  try {
    const response = await instance.get(
      "http://localhost:3000/api/pan/download",
      {
        params: {
          fileName: row.fileName,
          parentPath: row.parentPath,
        },
        responseType: "blob",
      }
    );
    const blob = new Blob([response.data]);
    const link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);
    link.setAttribute("download", row.fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } catch {
    Message.error("下载文件时发生错误");
  }
};

const handleDelete = async (row) => {
  try {
    console.log(row);
    const resp = await instance.get("http://localhost:3000/api/pan/delete", {
      params: {
        fileId: row.fileID,
        fileName: row.fileName,
        parentId: row.parentID,
        parentPath: row.parentPath,
        length: row.length,
      },
    });
    const data = resp.data;
    if (data.errorMessage === "success") {
      Message.success("删除成功");
      getData();
    } else {
      Message.error("删除失败");
    }
  } catch {
    Message.error("删除失败");
  }
};

const handleSelect = (selection) => {
  selectData.value = selection;
};

const downloadAll = () => {
  if (selectData.value.some((item) => item.type === 0)) {
    Message.error("只能下载文件");
    return;
  }
  selectData.value.forEach(downloadFile);
};

const deleteAll = () => {
  if (selectData.value.some((item) => item.type === 0)) {
    Message.error("只能删除文件");
    return;
  }
  selectData.value.forEach(handleDelete);
};
const projectInfo = ref<Project>();
const processInfo = ref<ProjectRecord>();
const handleClick = async (item) => {
  // 获取pjtNo
  const pjtNo = item.pjtNo;
  // 根据pjtNo查询项目流程
  const res = await getProjectInfoByPjtNo(pjtNo);

  projectInfo.value = res.data.data;
  projectFilePath.value = projectInfo.value?.pjtName;
  // 为breadcrumbs添加一条记录
  if (projectFilePath) {
    breadcrumbs.value= [{
      list: "D:\\projectsPans" + "\\" +projectFilePath.value,
      index: "0", 
    }];
  }
  getData();
  currentStep.value = Number(projectInfo.value?.pjtStop);
  maxStep.value = Number(projectInfo.value?.pjtStop);
};

const currentStep = ref(0);
const maxStep = ref(0);
watch(currentStep, async (newStep) => {
  if (newStep <= maxStep.value) {
    const pNo = projectInfo.value?.pjtNo;
    getProcessInfo(pNo, newStep);
  } else {
    // 提示错误
    Message.error("无法访问该流程，请先完成上一流程");
    // 重置currentStep
    currentStep.value = maxStep.value;
  }
});
// 获取项目的流程信息
const getProcessInfo = async (pNo, pcsNo) => {
  const res = await getProcessInfoByPjtNoAndPcsNo(pNo, pcsNo);
  if (res.data.code === 200) {
    processInfo.value = res.data.data;
  }
};
const determineAlertType = (status) => {
  switch (status) {
    case "1":
      return "success";
    case "0":
      return "error";
    default:
      return "info";
  }
};
const addProjectDialog = ref(false);
const firstCheckDialog = ref(false);
const manageCheckDialog = ref(false);
const clientCheckDialog = ref(false);
const resetAccessDialog = ref(false);
const clientCheckComment = ref("");
const selectedStep = ref();
const selectedReset = ref();
const resetOptions = [
  { text: '建模', value: "2" },
  { text: '渲染', value: "3" },
  { text: '后期', value: "4" },
];
const addForm = ref({
  pjtName: "",
  pjtMoney: "",
  cltNo: userStore.userId,
});
const createProject = async () => {
  const res = await createProjectByInfo(addForm.value);
  if (res.data.code === 200) {
    Message.success("添加项目成功");
    //刷新列表
    // 获取所有项目
    const res = await getAllProjects(userStore.userId);
    if (res.data.code === 200) {
      // 根据完成状态分别赋予列表
      workingItems.value = res.data.data.filter(
        (item) => item.pjtStatus === "0"
      );
      finishedItems.value = res.data.data.filter(
        (item) => item.pjtStatus === "1"
      );
    }
  } else {
    Message.error("添加项目失败");
  }
  addProjectDialog.value = false;
};
const clickForFirstCheck = () => {
  firstCheckDialog.value = true;
};
// 主管审核按钮
const clickForAdminCheck = () => {
  manageCheckDialog.value = true;
};
// 客户审核按钮
const clickForClientCheck = () => {
  clientCheckDialog.value = true;
};
const resetProcess = () => {
  resetAccessDialog.value = true;
};
const agreeResetProcess = async() => {
  const res = await refuseCheckClient(userStore.userId,selectedReset.value,projectInfo.value?.pjtNo,clientCheckComment.value);
  if (res.data.code === 200) {
      Message.success("驳回成功");
    } else {
      Message.error("驳回失败");
  }
    clientCheckDialog.value = false;
  // 刷新
  const res2 = await getProcessInfoByPjtNoAndPcsNo(projectInfo.value?.pjtNo, currentStep.value);
  if (res2.data.code === 200) {
    processInfo.value = res2.data.data;
  }

};
const clientAgree = async() => {

  const res = await acceptCheckClient(currentStep.value,projectInfo.value?.pjtNo);
  if (res.data.code === 200) {
      Message.success("审核成功");
    } else {
      Message.error("审核失败");
  }
  clientCheckDialog.value = false;
  // 刷新
  const res2 = await getProcessInfoByPjtNoAndPcsNo(projectInfo.value?.pjtNo, currentStep.value);
  if (res2.data.code === 200) {
    processInfo.value = res2.data.data;
  }
};
const clientDisAgree = async() => {
   const res = await refuseCheckClient(userStore.userId,currentStep.value,projectInfo.value?.pjtNo,clientCheckComment.value);
  if (res.data.code === 200) {
      Message.success("驳回成功");
    } else {
      Message.error("驳回失败");
  }
    clientCheckDialog.value = false;
  // 刷新
  const res2 = await getProcessInfoByPjtNoAndPcsNo(projectInfo.value?.pjtNo, currentStep.value);
  if (res2.data.code === 200) {
    processInfo.value = res2.data.data;
  }
};


// 初始加载数据
getData();
</script>

<template>
  <!-- 新增客户对话框 -->
  <v-dialog v-model="addProjectDialog" max-width="35rem">
    <v-card>
      <v-card-title>新增项目</v-card-title>
      <v-card-text>
        <VForm @submit.prevent="() => {}">
          <VRow>
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>客户预算</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="addForm.pjtName"
                    prepend-inner-icon="bx-book-content"
                    placeholder="请输入项目名称"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>
            <!-- 👉 项目预算 -->
            <VCol cols="12">
              <VRow no-gutters>
                <VCol cols="12" md="3">
                  <label>项目预算</label>
                </VCol>

                <VCol cols="12" md="9">
                  <VTextField
                    v-model="addForm.pjtMoney"
                    prepend-inner-icon="bx-money"
                    placeholder="请输入项目预算"
                    persistent-placeholder
                  />
                </VCol>
              </VRow>
            </VCol>
          </VRow>
        </VForm>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="addProjectDialog = false">取消</v-btn>
        <v-btn @click="createProject()">创建</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <!-- 引进悬浮窗 -->

  <VRow>
    <!-- 左侧卡片: 项目列表 -->
    <VCol cols="12" md="4">
      <VCard height="85vh">
        <div class="d-flex justify-space-between align-center mt-4 mb-4">
          <VCardTitle>我的项目</VCardTitle>
          <v-btn
            icon="bx-plus"
            size="small"
            style="margin-right: 2rem"
            @click="addProjectDialog = true"
          />
        </div>
        <VDivider />
        <h3 class="ml-5 mt-5 mb-5">未完成项目</h3>
        <VDivider />

        <VList>
          <VListItem
            v-for="(item, index) in workingItems"
            :key="index"
            @click="handleClick(item)"
          >
            <VListItemTitle>{{ item.pjtName }}</VListItemTitle>
          </VListItem>
        </VList>
        <VDivider />
        <h3 class="ml-5 mt-5 mb-5">已完成项目</h3>
        <VDivider />
        <VList>
          <VListItem
            v-for="(item, index) in finishedItems"
            :key="index"
            @click="handleClick(item)"
          >
            <VListItemTitle>{{ item.pjtName }}</VListItemTitle>
          </VListItem>
        </VList>
      </VCard>
    </VCol>

   
    <!-- 客户审核Dialog -->
    <v-dialog v-model="clientCheckDialog" max-width="35rem">
      <v-card>
        <v-card-title>客户审核</v-card-title>
        <v-card-text>
          <v-alert type="warning"> 请选择审核结果并给出意见 </v-alert>
          <v-textarea
            class="mt-5"
            v-model="clientCheckComment"
            label="审核意见"
            rows="5"
            placeholder="请输入您的意见..."
          ></v-textarea>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="clientCheckDialog = false">取消</v-btn>
          <v-btn @click="clientDisAgree()">不通过</v-btn>
          <v-btn @click="clientAgree">通过</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- 流程回滚Dialog -->
    <v-dialog v-model="resetAccessDialog" max-width="35rem">
      <v-card>
        <v-card-title>流程回滚</v-card-title>
        <v-card-text>
          <v-alert type="warning"> 请选择需要回退的流程 </v-alert>
          <v-select
            :items=resetOptions
            label="选择回滚到的步骤"
            item-title="text"
            item-value="value"
            v-model="selectedReset"
            class="mt-5"
          ></v-select>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="resetAccessDialog = false">取消</v-btn>
          <v-btn @click="agreeResetProcess">通过</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- 右侧卡片 -->
    <VCol cols="12" md="8">
      <!-- 项目流程 -->
      <!-- <VCard height="55%">
        <VCardTitle>项目流程</VCardTitle> -->
      <div v-if="currentStep === 0">
        <v-alert
          type="error"
          title="暂无数据"
          text="请点击项目查询项目流程"
         
        >
      
      </v-alert>
      </div>
      <div v-else>
        <VStepper
          :items="['建项', '建模', '渲染', '后期', '完成']"
          v-model="currentStep"
        >
          <template #item.1>
            <VCard flat>
              <VRow>
                <VCol cols="12" md="6">
                  <v-alert :type="determineAlertType(projectInfo?.cltName)"
                    >【客户姓名】: {{ projectInfo?.cltName }}</v-alert
                  ></VCol
                >
                <VCol cols="12" md="6">
                  <v-alert :type="determineAlertType(processInfo?.fileStatus)">
                    【上传状态】:
                    {{ processInfo?.fileStatus === "1" ? "已上传" : "未上传" }}
                  </v-alert>
                </VCol>
                <VCol cols="12" md="6">
                  <v-alert
                    :type="determineAlertType(processInfo?.manageCheckStatus)"
                  >
                    【主管审核状态】:
                    {{
                      processInfo?.manageCheckStatus === "1"
                        ? "已审核"
                        : "未审核"
                    }}
                    <VChip
                      style="background-color: #005a9e"
                      v-if="
                        processInfo?.manageCheckStatus === '0' &&
                        userStore.userRole === '建模主管'
                      "
                      @click="clickForFirstCheck"
                      >点击审核</VChip
                    >
                  </v-alert>
                </VCol>
                <VCol cols="12" md="6">
                  <v-alert
                    :type="determineAlertType(processInfo?.finishStatus)"
                  >
                    【完成状态】:
                    {{
                      processInfo?.finishStatus === "1" ? "已完成" : "未完成"
                    }}
                  </v-alert>
                </VCol>
                <VCol cols="12" md="12">
                  <v-alert :type="determineAlertType(projectInfo?.pjtBuildtime)"
                    >【创建时间】:{{ projectInfo?.pjtBuildtime }}
                  </v-alert>
                </VCol>
              </VRow>
            </VCard>
          </template>

          <template #item.2>
            <VCard flat>
              <VRow>
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.adminName)"
                    >【建模主管】: {{ processInfo?.adminName }}</v-alert
                  ></VCol
                >
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.adminTel)"
                    >【联系电话】: {{ processInfo?.adminTel }}</v-alert
                  ></VCol
                >
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.finishStatus)"
                    >【完成状态】:{{
                      processInfo?.finishStatus === "1" ? "已完成" : "未完成"
                    }}
                  </v-alert>
                </VCol>
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.staffName)"
                    >【建模员工】:
                    {{
                      processInfo?.staffName === userStore.userName
                        ? "我"
                        : processInfo?.staffName
                    }}
                    <VChip
                      style="background-color: #005a9e"
                      v-if="
                        processInfo?.staffName === null &&
                        userStore.userRole === '建模主管'
                      "
                      @click="allocateTask"
                      >分配员工</VChip
                    >
                    <VChip
                      style="background-color: #005a9e"
                      v-if="processInfo?.staffName === userStore.userName"
                      @click="refuseTask"
                      >拒绝</VChip
                    >
                  </v-alert></VCol
                >

                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.staffTel)"
                    >【联系电话】: {{ processInfo?.staffTel }}</v-alert
                  ></VCol
                >
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.fileStatus)"
                    >【员工上传状态】:
                    {{
                      processInfo?.fileStatus === "1" ? "已上传" : "未上传"
                    }}</v-alert
                  ></VCol
                >

                <VCol cols="12" md="6"
                  ><v-alert
                    :type="determineAlertType(processInfo?.manageCheckStatus)"
                    >【主管审核状态】:{{
                      processInfo?.manageCheckStatus === "1"
                        ? "已审核"
                        : "未审核"
                    }}
                    <VChip
                      style="background-color: #005a9e"
                      v-if="
                        processInfo?.manageCheckStatus === '0' &&
                        userStore.userRole === '建模主管'
                      "
                      @click="clickForAdminCheck"
                      >点击审核</VChip
                    >
                  </v-alert>
                </VCol>
                <VCol cols="12" md="6">
                  <v-alert
                    :type="determineAlertType(processInfo?.clientCheckStatus)"
                    >【客户审核状态】:
                    {{
                      processInfo?.clientCheckStatus === "1"
                        ? "已审核"
                        : "未审核"
                    }}
                    <VChip
                      style="background-color: #005a9e"
                      v-if="processInfo?.clientCheckStatus === '0'"
                      @click="clickForClientCheck"
                      >点击审核</VChip
                    >
                  </v-alert>
                </VCol>
              </VRow>
            </VCard>
          </template>

          <template #item.3>
            <VCard flat>
              <VRow>
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.adminName)"
                    >【渲染主管】: {{ processInfo?.adminName }}</v-alert
                  ></VCol
                >
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.adminTel)"
                    >【联系电话】: {{ processInfo?.adminTel }}</v-alert
                  ></VCol
                >
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.finishStatus)"
                    >【完成状态】:{{
                      processInfo?.finishStatus === "1" ? "已完成" : "未完成"
                    }}
                  </v-alert>
                </VCol>
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.staffName)"
                    >【渲染员工】:
                    {{
                      processInfo?.staffName === userStore.userName
                        ? "我"
                        : processInfo?.staffName
                    }}
                    <VChip
                      style="background-color: #005a9e"
                      v-if="
                        processInfo?.staffName === null &&
                        userStore.userRole === '渲染主管'
                      "
                      @click="allocateTask"
                      >分配员工</VChip
                    >
                    <VChip
                      style="background-color: #005a9e"
                      v-if="processInfo?.staffName === userStore.userName"
                      @click="refuseTask"
                      >拒绝</VChip
                    >
                  </v-alert></VCol
                >

                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.staffTel)"
                    >【联系电话】: {{ processInfo?.staffTel }}</v-alert
                  ></VCol
                >
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.fileStatus)"
                    >【员工上传状态】:
                    {{
                      processInfo?.fileStatus === "1" ? "已上传" : "未上传"
                    }}</v-alert
                  ></VCol
                >

                <VCol cols="12" md="6"
                  ><v-alert
                    :type="determineAlertType(processInfo?.manageCheckStatus)"
                    >【主管审核状态】:{{
                      processInfo?.manageCheckStatus === "1"
                        ? "已审核"
                        : "未审核"
                    }}
                    <VChip
                      style="background-color: #005a9e"
                      v-if="
                        processInfo?.manageCheckStatus === '0' &&
                        userStore.userRole === '渲染主管'
                      "
                      @click="clickForAdminCheck"
                      >点击审核</VChip
                    >
                  </v-alert>
                </VCol>
                <VCol cols="12" md="6">
                  <v-alert
                    :type="determineAlertType(processInfo?.clientCheckStatus)"
                    >【客户审核状态】:
                    {{
                      processInfo?.clientCheckStatus === "1"
                        ? "已审核"
                        : "未审核"
                    }}
                    <VChip
                      style="background-color: #005a9e"
                      v-if="processInfo?.clientCheckStatus === '0'"
                      @click="clickForClientCheck"
                      >点击审核</VChip
                    >
                  </v-alert>
                </VCol>
              </VRow>
            </VCard>
          </template>

          <template #item.4>
            <VCard flat>
              <VRow>
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.adminName)"
                    >【后期主管】: {{ processInfo?.adminName }}</v-alert
                  ></VCol
                >
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.adminTel)"
                    >【联系电话】: {{ processInfo?.adminTel }}</v-alert
                  ></VCol
                >
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.finishStatus)"
                    >【完成状态】:{{
                      processInfo?.finishStatus === "1" ? "已完成" : "未完成"
                    }}
                  </v-alert>
                </VCol>
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.staffName)"
                    >【后期员工】:
                    {{
                      processInfo?.staffName === userStore.userName
                        ? "我"
                        : processInfo?.staffName
                    }}
                    <VChip
                      style="background-color: #005a9e"
                      v-if="
                        processInfo?.staffName === null &&
                        userStore.userRole === '后期主管'
                      "
                      @click="allocateTask"
                      >分配员工</VChip
                    >
                    <VChip
                      style="background-color: #005a9e"
                      v-if="processInfo?.staffName === userStore.userName"
                      @click="refuseTask"
                      >拒绝</VChip
                    >
                  </v-alert></VCol
                >

                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.staffTel)"
                    >【联系电话】: {{ processInfo?.staffTel }}</v-alert
                  ></VCol
                >
                <VCol cols="12" md="4">
                  <v-alert :type="determineAlertType(processInfo?.fileStatus)"
                    >【员工上传状态】:
                    {{
                      processInfo?.fileStatus === "1" ? "已上传" : "未上传"
                    }}</v-alert
                  ></VCol
                >

                <VCol cols="12" md="6"
                  ><v-alert
                    :type="determineAlertType(processInfo?.manageCheckStatus)"
                    >【主管审核状态】:{{
                      processInfo?.manageCheckStatus === "1"
                        ? "已审核"
                        : "未审核"
                    }}
                    <VChip
                      style="background-color: #005a9e"
                      v-if="
                        processInfo?.manageCheckStatus === '0' &&
                        userStore.userRole === '后期主管'
                      "
                      @click="clickForAdminCheck"
                      >点击审核</VChip
                    >
                  </v-alert>
                </VCol>
                <VCol cols="12" md="6">
                  <v-alert
                    :type="determineAlertType(processInfo?.clientCheckStatus)"
                    >【客户审核状态】:
                    {{
                      processInfo?.clientCheckStatus === "1"
                        ? "已审核"
                        : "未审核"
                    }}
                    <VChip
                      style="background-color: #005a9e"
                      v-if="processInfo?.clientCheckStatus === '0'"
                      @click="clickForClientCheck"
                      >点击审核</VChip
                    >
                  </v-alert>
                </VCol>
              </VRow>
            </VCard>
          </template>

          <template #item.5>
            <VCard flat>
              <VRow>
                <VCol cols="12" md="12">
                  <v-alert :type="determineAlertType(projectInfo?.pjtStatus)"
                    >【完成状态】:{{
                      projectInfo?.pjtStatus === "1" ? "已完成" : "未完成"
                    }}
                    <VChip
                      style="margin-left: 30rem; background-color: #005a9e"
                      v-if="
                        projectInfo?.pjtStatus === '1' &&
                        userStore.userRole === '客户'
                      "
                      @click="resetProcess"
                      >请求回滚</VChip
                    >
                  </v-alert>
                </VCol>
                <VCol cols="12" md="12">
                  <v-alert
                    :type="determineAlertType(projectInfo?.pjtFinishtime)"
                    >【完成时间】:{{ projectInfo?.pjtFinishtime }}
                  </v-alert>
                </VCol>
              </VRow>
            </VCard>
          </template>
        </VStepper>
      </div>
      <!-- </VCard> -->
      <!-- 项目资料 -->
      <VCard height="42%" class="mt-5">
        <VCardTitle>项目资料</VCardTitle>

        <div
          class="bg-white p-5 w-full rounded-md box-border border"
          style="display: flex; justify-content: space-between"
        >
          <div class="mt-5 mb-5">
            <el-breadcrumb class="ml-2" style="display: flex; cursor: pointer">
              <el-breadcrumb-item
                v-for="(item, index) in breadcrumbs"
                @click="toFile(item)"
                style="display: flex"
              >
                <div
                  style="text-decoration: underline"
                  class="mr-2 font-semibold hover:text-primary hover:cursor-pointer"
                  v-if="index == 0"
                >
                  全部文件
                </div>
                <div
                  style="text-decoration: underline"
                  class="ml-2 mr-2 font-semibold hover:text-primary hover:cursor-pointer"
                  v-else
                >
                  {{ item.list }}
                </div>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div>
            <VBtn
              class="mr-10 mt-2"
              prepend-icon="bx-upload"
              color="#004578"
              @click="couldUpload()"
            >
              上传文件
            </VBtn>
          </div>
        </div>

        <div>
          <v-table
            fixed-header
            :items="tableData"
            item-key="name"
            style="height: 200px"
          >
            <thead>
              <tr>
                <th>选择</th>
                <!-- 选择框列 -->
                <th>文件名</th>
                <th>上次修改时间</th>
                <th>文件大小</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in tableData" :key="item.name">
                <td class="text-center">
                  <v-checkbox @change="handleSelect(item)"></v-checkbox>
                </td>
                <td>
                  <div
                    @mouseenter="showOp(item)"
                    @mouseleave="hideOp(item)"
                    style="display: flex; align-items: center"
                  >
                    <v-icon
                      v-if="item.type == 0"
                      size="24"
                      style="margin-left: 120px"
                      >mdi-folder</v-icon
                    >
                    <v-icon v-else size="24">mdi-file</v-icon>
                    <div
                      style="
                        margin-left: 8px;
                        cursor: pointer;
                        text-decoration: underline;
                      "
                      @click="freshData(item)"
                    >
                      {{ item.fileName }}
                    </div>
                  </div>
                </td>
                <td class="text-center">{{ item.lastUpdateTime }}</td>
                <td class="text-center">{{ item.length }}</td>
                <td class="text-center">
                  <v-btn
                    v-if="item.type != 0"
                    color="#004578"
                    @click="downloadFile(item)"
                  >
                    下载
                  </v-btn>
                  <v-btn
                    v-if="item.type != 0"
                    color="#8a8886"
                    @click="handleDelete(item)"
                  >
                    删除
                  </v-btn>
                </td>
              </tr>
            </tbody>
          </v-table>
        </div>
      </VCard>
    </VCol>
  </VRow>

  <!-- 上传dialog -->
  <ElDialog
    v-model="uploadVisiable"
    title="上传文件"
    class="rounded-lg"
    @close="handleClose"
  >
    <el-upload
      ref="uploadFile"
      drag
      :data="extraFormData"
      :on-success="handleSuccess"
      :on-error="handleError"
      action="http://localhost:3000/api/pan/uploadFile"
      multiple
      name="files"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">拖拽文件到此 或 <em>点击上传</em></div>
    </el-upload>
  </ElDialog>
</template>
